<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sfc后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <!-- <script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script> -->
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../lib/layui-v2.5.4/layui.js"></script>
    <style>
      #textarea-box {
        width: calc(100% - 110px);
        margin-right: 0;
      }
      .preview-box {
        display: none;
      }
      #preview {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <!-- 上传推荐新闻：标题/内容/封面 -->
        <div class="layui-form">
          <div class="layui-form-item">
            <label class="layui-form-label">*選擇類別</label>
            <div class="layui-input-block">
              <select name="category" id="category">

              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">*标题</label>
            <div class="layui-input-block">
              <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">*封面</label>
            <div class="layui-input-inline">
              <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>上传图片
              </button>
            </div>
          </div>
          <div class="layui-form-item preview-box">
            <label class="layui-form-label">&nbsp;&nbsp;&nbsp;</label>
            <div class="layui-input-inline">
              <img id="preview">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">*内容</label>
            <div class="layui-input-inline" id="textarea-box">
              <textarea id="content" name="content" style="display: none;"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
              <button class="layui-btn" lay-submit="submit" lay-filter="formSubmit" id="submit">提交</button>
            </div>
          </div>
        </div>
      </div>
    </div>


    <script>
      window.onload = function() {
        
        getCate();



        var cover_img = '';
        layui.use('upload', function() {
          var upload = layui.upload;

          var uploadInst = upload.render({
            elem: '#upload',
            url: 'http://localhost:3000/upload',
            done: function(res) {
              cover_img = res.data.src;
              $('.preview-box').show();
              $('#preview').prop('src', res.data.src);
            },
            error: function(err) {
              throw err;
            }
          });
        });

        var layedit, edit;
        layui.use('layedit', function() {
          layedit = layui.layedit;

          layedit.set({
            uploadImage: {
              url: 'http://localhost:3000/upload',
              type: 'post'
            }
          });

          edit = layedit.build('content', {
            height: 400,
            tool: [
              'strong' //加粗
              , 'italic' //斜体
              , 'underline' //下划线
              , 'del' //删除线
              , '|' //分割线
              , 'left' //左对齐
              , 'center' //居中对齐
              , 'right' //右对齐
              , 'link' //超链接
              , 'image' //插入图片
            ]
          });
        });

        var layer;
        layui.use('layer', function() {
          layer = layui.layer;
        });
        layui.use('form', function() {
          var form = layui.form;

          form.on('submit(formSubmit)', function(data) {
            let postData = {
              category_id: $('#category').val(),
              title: data.field.title,
              cover_img: cover_img,
              content: layedit.getContent(edit)
            }
            
            if (!postData.category_id || !postData.title || !postData.cover_img || !postData.content) {
              layer.msg('请填写完全');
              return;
            }
            
            addArticle(postData);
            
          });
        });

        function getCate() {
          $.ajax({
            url: 'http://localhost:3000/getCate',
            type: 'get',
            success(res) {
              let str = '';
              for (let i in res.data) {
                str += '<option value="' + res.data[i].id + '">' + res.data[i].title + '</option>';
              }
              $('#category').append(str);
            },
            fail() {
              layer.msg('獲取失败');
            }
          })
        }
        
        function addArticle(postData) {
          $.ajax({
            url: 'http://localhost:3000/uploadArticle',
            type: 'post',
            dataType: 'json',
            data: postData,
            success(res) {
              layer.msg('提交成功');
              setTimeout(function() {
                var index = window.parent.layer.getFrameIndex(window.name);
                window.parent.layer.close(index);
              }, 1000);
            },
            fail() {
              layer.msg('提交失败');
            }
          })
        }
      };
    </script>
  </body>
</html>
